<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:58
-->
<template>
  <div ref="root" style="height:95%;"></div>
</template>
<script>
import {DualAxes} from '@antv/g2plot'
import { ref,onMounted } from 'vue'
export default {
  setup(){
    //获取dom元素
    const root = ref(null)
    let dualAxes = null
    let initChart = ()=>{
    dualAxes = new DualAxes(root.value, {
  data: [
        [ { name: '部门单独办事大厅', value: 86334, percent: 99.04 },
         { name: '市政务大厅', value: 30799, percent: 95.7 },
         { name: '区政务中心', value: 7683, percent: 99.49 },
         { name: '房地产服务中心', value: 6292, percent: 95 },
      ],
       [
         { name: '部门单独办事大厅', value: 86334, percent: 99.04 },
         { name: '市政务大厅', value: 30799, percent: 95.7 },
         { name: '区政务中心', value: 7683, percent: 99.49 },
         { name: '房地产服务中心', value: 6292, percent: 95 },
      ],
      ],
  xField: 'name',
  yField: ['value', 'percent'],
  yAxis: {
    // 格式化左坐标轴
    value: {
      alias:'办理量',
      min: 0,
      label: {
        formatter: (val) => `${val}个`,
      },
    },
    // 隐藏右坐标轴
    percent: {
      alias:'提前办结率'
    }
  },
  geometryOptions: [
    {
      geometry: 'column',
      color: '#92e6a3',
      columnWidthRatio: 0.4,
    },
    {
      geometry: 'line',
      color: '#d8e160',
    },
  ],
  // 更改柱线交互，默认为 [{type: 'active-region'}]
  interactions: [
    {
      type: 'element-highlight',
    },
    {
      type: 'active-region',
    },
  ],
  annotations: {
    value: [
      {
        type: 'text',
        position: ['2019-06', 'max'],
        content: '办理量',
      },
    ],
    percent: [
      {
        type: 'dataMarker',
        top: true,
        position: ['2019-05', 400],
        line: {
          length: 20,
        },
        text: {
          content: '2019-05, 发布新版本',
          style: {
            textAlign: 'left',
          },
        },
      },
    ],
  },
});

dualAxes.render();
    }

    onMounted(initChart)
    return{
      root
    }
  }
}
</script>



